<template>
	<view :class="item.istop ? 'bg-light' : 'bg-white'" hover-class="bg-light">
		<!-- 这里对于长按事件在APP端读出来的全是0，但是在小程序端却是可以的，那么为了满足在多端都可以实现长按，这里将最外层的view换成div -->
		<div class="flex align-stretch" @click="onClick" @longpress="long">
			<!-- 左侧头像区域 -->
			<view class="flex align-center justify-center position-relative" style="width: 145rpx;">
				<liweijianAvatar :src="item.avatar" size="92"></liweijianAvatar>
				<liweijianBadge v-if="item.noreadnum > 0" :value="item.noreadnum" badgeClass="position-absolute"
					badgeStyle="top: 15rpx; right: 15rpx;"></liweijianBadge>
			</view>
			<!-- 消息/时间区域 -->
			<view class="flex flex-column border-bottom flex-1 py-3 pr-3 border-light-secondary">
				<view class="flex align-center justify-between mb-1">
					<text class="font-md">{{item.nickname}}</text>
					<text class="font-sm text-light-muted">{{item.update_time | formateTime}}</text>
				</view>
				<text class="font text-ellipsis text-light-muted">{{item.data}}</text>
			</view>
		</div>
	</view>
</template>

<script>
	import liweijianAvatar from './liweijian-avatar.vue';
	import liweijianBadge from "./liweijian-badge.vue";

	import freeBase from "@/common/mixin/base.js";

	export default {
		name: "liweijian-media-list",
		mixins: [freeBase],
		components: {
			liweijianAvatar,
			liweijianBadge,
		},
		props: {
			item: {
				type: Object,
				default: () => ({})
			},
			index: Number,
		},
		data() {
			return {

			};
		},
		methods: {
			// 点击事件
			onClick() {
				this.$emit('click');
			},
			// 长按事件
			long(e) {
				let x = 0;
				let y = 0;
				// #ifdef APP-PLUS-NVUE
				if (Array.isArray(e.changedTouches) && e.changedTouches.length > 0) {
					x = e.changedTouches[0].screenX
					y = e.changedTouches[0].screenY
				}
				// #endif
				// #ifdef H5
				x = e.changedTouches[0].pageX
				y = e.changedTouches[0].pageY
				// #endif
				// #ifdef MP
				x = e.detail.x
				y = e.detail.y
				// #endif
				this.$emit('long',{
					x,
					y,
					index:this.index
				})
			},
		},
	}
</script>